<style scoped lang="stylus">
  .van-tabbar-item--active {
    color: #ff558d;
  }
</style>

<template>

  <div>

    <van-tabbar v-model="active" style="z-index: 1999">
      <van-tabbar-item
        v-for="(tab, index) in tabbar"
        :icon="tab.icon"
        :to="tab.path"
        :dot="tab.dot"
        :info="tab.info"
        :key="index">
        <span>{{tab.name}}</span>
        <template slot="icon" slot-scope="props">
          <img :src="props.active ? tab.active : tab.normal"/>
        </template>
      </van-tabbar-item>
    </van-tabbar>


  </div>
</template>

<script>

  import homeNo from '@/assets/main/icon_1_n.png'
  import homeAt from '@/assets/main/icon_1_s.png'

  import monvNo from '@/assets/main/icon_2_n.png'
  import monvAt from '@/assets/main/icon_2_s.png'

  import cartNo from '@/assets/main/icon_3_n.png'
  import cartAt from '@/assets/main/icon_3_s.png'

  import myNo from '@/assets/main/icon_4_n.png'
  import myAt from '@/assets/main/icon_4_s.png'

  import {Tabbar, TabbarItem} from 'vant';

  export default {
    // 数据初始化
    data() {
      return {
        active: 0,
        tabbar: [{
          name: "首页",
          path: "/",
          pathName: "home",
          icon: "compass-full",
          dot: false,
          info: "",
          normal: homeNo,
          active: homeAt
        },
          {
            name: "魔女圈",
            path: "/community",
            pathName: "community",
            icon: "class-full",
            dot: false,
            info: "",
            normal: monvNo,
            active: monvAt
          },
          {
            name: "购物车",
            path: "/cart",
            pathName: "cart",
            icon: "cart-full",
            dot: false,
            info: "",
            normal: cartNo,
            active: cartAt
          },
          {
            name: "我的",
            path: "/mine",
            pathName: "mine",
            icon: "wode",
            dot: false,
            info: "",
            normal: myNo,
            active: myAt
          }
        ]
      }
    },
    mounted() {
      const toName = this.$route.name
      this.setActive(toName)
    },

    methods: {
      changeActive({name}) {
        this.setActive(name)
      },
      setActive(name) {

        console.log(name);

        if(name === 'community')
        {
          console.log('hello');
          let category = "底部Tab栏";
          let action = "点击";
          let label = "魔女圈";
          window._czc.push(["_trackEvent",category,action,label]);
        }
        this.tabbar.forEach((tab, i) => {
          if (tab.pathName === name) {
            this.active = i;
            return false;
          }
        });
      }
    },

    // 监听数据的变化
    watch: {
      '$route': 'changeActive'
    },
    components: {
      [Tabbar.name]: Tabbar,
      [TabbarItem.name]: TabbarItem,
    }
  }
</script>


